<template>
    <div class="wallet">
        <div class="home-top" :class="{'ispc':mobile==2}">
<!--            <img src="../../assets/images/blcimg/homelogo.png" alt="" class="home-icon"
                @click="$router.push('/home')" />-->
            <div>{{ $t('new.desc36') }}</div>
<!--            <img src="../../assets/images/blcimg/message.png" alt="" class="home-message"-->
<!--                @click="$router.push('/message')" />-->
        </div>
        <div class="wallet-con">
            <div class="wallet-info">
<!--                <img src="../../assets/images/assets_info_eye_close.png" class="eye" alt="" v-if="!isopen"-->
<!--                    @click="handlerEye" />-->
<!--                <img src="../../assets/images/assets_info_eye_open.png" class="eye" alt="" v-else-->
<!--                    @click="handlerOpen" />-->
                <div class="wallet-name">
                    {{ $t('new.desc37') }}
                </div>
                <div class="wallet-num">
                    <div>≈</div>
                    <p v-if="isopen">{{ info.totalUSDTAmount }}</p>
                    <p v-else>******</p>
                </div>
                <div class="wallet-balace">
                    <div>{{ $t('new.desc38') }}</div>
                    <p v-if="isopen">≈ {{ info.totalUSDTBalance }} </p>
                    <p v-else>******</p>
                </div>
            </div>
            <div class="list-tsitle" v-if="showNull">
                {{$t('new.desc127')}}
            </div>
            <div class="list-more">
                <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" @load="onLoad">
                    <van-cell v-for="item in list" :key="item.id">
                        <div class="list-info">
                            <div class="list-type">
                                {{item.date}}
                            </div>
                            <div class="list-amonut">
                                <div>{{item.type}}</div>
                                <div v-if="item.typeCode == 9 || item.typeCode == 21"> {{item.amount}}</div>
                                <div v-else> {{item.amount}}</div>

                            </div>
                        </div>
                    </van-cell>
                </van-list>
            </div>

        </div>
        <setTrade :hasTrue="userinfo.hasSetPassword" v-if="showSet" :showSet="showSet" @handlerClose="handlerClose">
        </setTrade>
        <verifyPass :isShow_VerifyPssPopup="isShow_VerifyPssPopup" @hadleHideVerifyPssPopup="hadleHideVerifyPssPopup"
            @getPayPass="getPayPass"></verifyPass>
        <bottom_nav :activeTitle="activeTitle"></bottom_nav>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile: localStorage.getItem('ismobile'),
            activeTitle: this.$t('title.zican'),
            isopen: true,
            showSet: false,
            userinfo: {},
            info: {},
            isShow_VerifyPssPopup: false,
            finished: false,
            loading: false,
            list: [],
            page: 1,
            showNull:true
        }
    },
    mounted() {
        this.$post(this.URL.withdrawal.wallet, {}).then(res => {
            if (res.code == 0) {
                this.info = res.data
            } else {
                this.$toast(res.message);
            }
        })
        this.$post(this.URL.member.personal, {}).then(res => {
            if (res.code == 0) {
                this.userinfo = res.data
            } else {
                this.$toast(res.message)
            }
        })
        if (localStorage.getItem('isopen') != null) {
            this.isopen = localStorage.getItem('isoopen')
        }
    },
    methods: {
        onLoad() {
            setTimeout(() => {
                this.$post(this.URL.user.walletRecord, {
                    page: this.page,
                    pageSize: 10,
                }).then(res => {
                    if (res.code == 0) {
                        this.list = this.list.concat(res.data.list);
                        this.loading = false;
                        this.page++;
                        if(parseFloat(res.data.page.count) == 0){
                            this.showNull=false;
                        }
                        if (this.list.length >= parseFloat(res.data.page.count)) {
                            this.finished = true;
                        }

                    }
                })
            }, 500);
        },
        handlerOpen() {
            localStorage.setItem('isoopen', false)
            this.isopen = false;
        },
        handlerEye() {
            if (!this.userinfo.hasSetPassword) {
                this.showSet = true;
            } else {
                this.isShow_VerifyPssPopup = true;
            }
        },
        handlerClose() {
            this.showSet = false;
            this.$post(this.URL.member.personal, {}).then(res => {
                if (res.code == 0) {
                    this.userinfo = res.data;
                    if (this.userinfo.hasSetPassword) {
                        this.isShow_VerifyPssPopup = true;
                    }
                } else {
                    this.$toast(res.message)
                }
            })
        },
        hadleHideVerifyPssPopup() {
            this.isShow_VerifyPssPopup = false;
        },
        getPayPass(pass) {

            this.$post(this.URL.user.verify, {
                password: pass,
                hasThrow: true
            }).then(res => {
                if (res.code == 0) {
                    this.isShow_VerifyPssPopup = false;
                    this.isopen = true;
                    localStorage.setItem('isoopen', true)
                } else {
                    this.$toast(res.message)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.wallet {
    min-height: 100vh;

    .home-top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        z-index: 8;
        display: flex;
        background: #fff;
        justify-content: center;

        .home-icon {
            height: 0.46rem;
            margin: .21rem 0 0 .27rem;
        }

        div {
            font-size: .32rem;
            color: #222222;
            line-height: .88rem;
        }

        .home-message {
            width: 0.5rem;
            height: 0.5rem;
            margin: .19rem 0.27rem 0 0;
        }
    }

    .wallet-con {
        padding: 1.08rem 0.2rem 1.6rem;

        .wallet-info {
            position: relative;
            width: 100%;
            background: url('../../assets/images/walletbg.png') center no-repeat;
            background-size: 100% 100%;
            color: #FFFFFF;

            .eye {
                position: absolute;
                top: .4rem;
                right: .34rem;
                width: .44rem;
                height: .28rem;
            }

            .wallet-name {
                padding: .38rem .34rem;
                font-size: .28rem;

            }

            .wallet-num {
                padding: 0 .34rem .36rem;
                font-size: .4rem;
                display: flex;

                div {
                    padding-top: .34rem;
                }

                p {
                    font-size: .7rem;
                    margin-left: .21rem;
                }
            }

            .wallet-balace {
                width: 6.42rem;
                margin: 0 auto;
                padding: .31rem 0;
                display: flex;
                font-size: .26rem;
                justify-content: space-between;
                border-top: .01rem solid rgba(255, 255, 255, .2);
            }
        }

        .list-tsitle {
            padding: .2rem 0;
            font-size: .32rem;
        }

        .list-more {
            border-radius: .28rem;
            /deep/ .van-cell {
                padding: 0;
                background-color: #fff;
            }
          .van-cell::after {
            border-bottom: .04rem solid #ebebeb;
          }
            .list-info{
                padding:.2rem .3rem;
                .list-type{
                    font-size: .28rem;

                }
                .list-amonut{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }

    }
}
</style>
